<template>
  <MainLayout :maxwidth="false" startColor="1">
    <div class="mx-auto bg-white">
      <div class="w-80% mx-auto">
        <v-row>
          <v-col cols="5">
            <div class="w-[70%] mx-auto h-full flex items-center justify-end">
              <div>
                <h2>Page not found</h2>
                Page Not FoundBut your perfect custom product is justa click away. Let's get you back on track!
                <v-btn elevation="0" color="#1D498C" class="w-full! mt-4 text-white bg-[#1D498C]">
                  GO TO HOMEPAGE
                </v-btn>
                <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white">
                  CONTACT US
                </v-btn>
              </div>
            </div>
          </v-col>
          <v-col cols="7">
            <div class="w-[100%] mx-auto h-full flex items-center justify-start">
              <img src="/404/30.webp" class="w-[90%]!" v-img-auto="'10/7'">
            </div>
          </v-col>
        </v-row>
      </div>
    </div>
    <LayoutCol>

      <Imgs :num="4" :list="[
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
      ]" />
      <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!">
        View All Custom Products
      </v-btn>
    </LayoutCol>
    <LayoutCol>
      表单
    </LayoutCol>
    <LayoutCol>
      <Title title="Custom Embroidered Patches" class="mb-4" />
      <Imgs class="mb-50px" mode="card" :showTitle="false" :num="4" :list="[
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
      ]">
        <template #content>
          <h3 class="my-2">Lowest Price</h3>
          <ul class="text-[14px] md:text-[15px] text-left! text-black">
            <li class="list-inside-black mb-1">Crafted with precision</li>
            <li class="list-inside-black  mb-1">Features merrowed borders</li>
            <li class="list-inside-black  mb-1">Includes glow-in-the-dark
            </li>
            <li class="list-inside-black  mb-1">Designed for durability </li>
            <li class="list-inside-black  mb-1">Offers unique and </li>
          </ul>
        </template>
      </Imgs>

      <Imgs :num="6" :colNum="3" :showContent="false" :imgAuto="'10/8'" :list="[
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
        'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
      ]" />
      <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!">
        View All Custom Products
      </v-btn>
    </LayoutCol>
  </MainLayout>
</template>

<script setup lang="ts">
import { MainLayout } from '~/components/MainLayout';
import LayoutCol from '~/components/MainLayout/layoutCol.vue';
import { Swiper } from '~/components/swiper';
import Imgs from '~/components/swiper/imgs.vue';
import { Title } from '~/components/Title';

</script>